<template>
  <div class="box-wrap">
    <div class="inner">
      <div class="inner-top">
        <h3 class="title font-lg">{{ state.info.title }}</h3>
        <div class="tips-wrap flex">
          <div class="tips-item font-sm person">{{ state.info.introduce }}</div>
          <div class="tips-item font-sm hot">
            热度<span>{{ state.info.heat }}</span>
          </div>
          <div class="tips-item font-sm share" @click="changeStatus">分享</div>
          <shareDom :show="state.show" :config="state.config" @change="handleChange"></shareDom>
          <ul class="mark-list flex">
            <li class="mark-item font-sm" v-for="(tag, index) in state.info.tag" :key="index">
              {{ tag }}
            </li>
          </ul>
        </div>
      </div>
      <div class="content font-m" v-html="state.info.about"></div>
      <div class="img-wrap">
        <Scale bgHeight="700" bgColor="#FFFFFF" :sildeList="state.sildeList" :morenSrc="state.morenSrc"></Scale>
        <Slide bgHeight="700" bgColor="#FFFFFF" :sildeList="state.sildeList" :morenSrc="state.morenSrc"></Slide>
      </div>
    </div>
    <div class="news-wrap">
      <Title title="新闻资讯" desc="NEWS"></Title>
      <NewsVue :obj="state.news"></NewsVue>
    </div>
  </div>
</template>

<script setup lang="ts">
import Title from "@/components/Title.vue";
import NewsVue from "@/views/pages/home/components/News.vue";
import Scale from "@/views/pages/silde/scale.vue";
import Slide from "@/views/pages/silde/slider.vue"
import shareDom from '@/components/share.vue';
import { ref, reactive, onMounted, watch } from "vue";
import { getdetail, getCaseNews } from "@/api";
import { useRoute } from "vue-router";
const route = useRoute();

const state = reactive({
  info: {} as Record<string, any>,
  sildeList: [] as any,
  news: {} as Record<string, any>,
  morenSrc: "" as any,
  show: false,
  config: {
    title: '',
    pic: '',
    content: ''
  }
});

onMounted(() => {
  const id = route.query.id + "";
  getInfo(id)
  getNews();
});

const getInfo = (id: string) => {
  getdetail(id).then((res: any) => {
    if (res.title) {
      document.title = res.title
    }
    state.info = res;
    state.config.title = res.title;
    state.config.pic = res.cover_url;
    state.config.content = res.introduce;
    if (res.items && res.items.length) {
      state.sildeList = res.items;
      state.morenSrc = res.items[0].src;
    }
  });
}

const getNews = () => {
  getCaseNews().then((res: any) => {
    state.news = res;
  });
};

const changeStatus = () => {
  state.show = !state.show
}
const handleChange = () => {
  state.show = false
}

watch(() => route.query.id, (val) => {
  const id = val + "";
  getInfo(id)
})
</script>

<style lang="scss" scoped>
.box-wrap {
  margin-bottom: 75px;

  .inner {
    padding-top: 24px;
    margin: 0 auto;
    width: 1440px;
  }

  .title {
    height: 68px;
    line-height: 68px;
  }

  .tips-item {
    margin-right: 42px;
  }

  .tips-item::before {
    display: inline-block;
    content: "";
    margin-right: 10px;
    vertical-align: middle;
  }

  .person::before {
    width: 12px;
    height: 14px;
    background: url("@/assets/images/content/person.png") no-repeat;
  }

  .person::after {
    position: relative;
    top: -2px;
    margin-left: 6px;
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-left: 1px solid #626675;
    border-bottom: 1px solid #626675;
    transform: rotate(-45deg);
  }

  .hot::before {
    width: 11px;
    height: 14px;
    background: url("@/assets/images/content/hot.png") no-repeat;
  }

  .share::before {
    width: 14px;
    height: 14px;
    background: url("@/assets/images/content/share.png") no-repeat;
  }

  .mark-item {
    margin-right: 12px;
    padding: 0px 8px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background: #9195a3;
  }

  .content {
    margin: 34px auto;
  }
}
</style>
